<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
        <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增SPU</el-breadcrumb-item>
        <el-breadcrumb-item>第一步:选择类别</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品类别" prop="categoryId">
            <el-input v-model="ruleForm.categoryId" placeholder="请输入商品类别的ID"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {
                categoryName: '',
                categoryId:''

            },
            rules: {
                categoryId: [
                    { required: true, message: '请输入商品类别的id', trigger: 'blur' },
                ]
            }
        };
    },
    methods: {
        loadLocalRuleForm() {
            let localRuleFormString=localStorage.getItem('ruleForm');
            if (localRuleFormString){
                let localRuleForm=JSON.parse(localRuleFormString);
                this.ruleForm.categoryId=localRuleForm.categoryId;
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //向http://9080/categories/1发请求,获取类别详情,如果类别存在,且isParent为0,则保存类别id,下一步,否则报错
                    let url='http://localhost:9080/categories/'+this.ruleForm.categoryId;
                    console.log("url:"+url);
                    this.axios.create({'headers':{'Authorization':localStorage.getItem('jwt')}})
                    .get(url).then((response)=>{
                        let responseBody=response.data;
                        if (responseBody.state==20000){
                            if (responseBody.data.isParent==1){
                                this.$message.error("错误,选择的类别必须不包含子集类别")
                            }else {
                                this.ruleForm.categoryName = responseBody.data.name;
                                let ruleFormString= JSON.stringify(this.ruleForm);
                                localStorage.setItem('ruleForm',ruleFormString);
                                this.$router.push('spu-add-new2')
                            }
                        }else {
                            this.$message.error(responseBody.message);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted() {
        this.loadLocalRuleForm();
    }
}
</script>

<style scoped>

</style>